<template>
  <ContainerGroup>
    <Container height="fill" :scroll-y="true" display="flexY">
      <div id="roleManage">
        <div class="manage-box">
          <div class="title">
            用户管理
          </div>
          <el-table
            ref="singleTable"
            v-loading="tableLoading"
            border
            :data="tableData"
            size="mini"
            :header-cell-style="{ background: '#FAFAFA', height: '42px' }"
            highlight-current-row
            style="width: 100%"
            height="calc(100% - 100px)"
            class="loading-area"
            @row-click="viewRow"
          >
            <el-table-column prop="realname" :show-overflow-tooltip="true" label="用户名称" />
            <el-table-column prop="deptName" :show-overflow-tooltip="true" label="所属科室" />
          </el-table>
          <pagination v-show="total > 0" :total="total" :page.sync="pageNum" :limit.sync="pageSize" :page-size="pageSize" @pagation="pagationChange" />
        </div>
        <div class="manage-box">
          <div class="title form-item-container">
            <div class="form-item">
              <span class="form-item-label">科室：</span>
              <el-select
                v-model="deptCode"
                placeholder="请选择科室"
                size="mini"
                style="width: 180px"
                filterable
                clearable
              >
                <el-option
                  v-for="item in deptCodeoptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </div>
            <div>
              <i class="el-icon-circle-plus-outline icon " @click="add" />
            </div>
          </div>
          <el-table
            v-loading="deptLoading"
            border
            :data="deptData"
            size="mini"
            :header-cell-style="{ background: '#FAFAFA', height: '42px' }"
            highlight-current-row
            style="width: 100%"
            height="calc(100% - 100px)"
            class="loading-area"
          >
            <el-table-column prop="deptName" :show-overflow-tooltip="true" label="权限科室" />
            <el-table-column label="操作" width="100">
              <template slot-scope="scope">
                <el-tooltip class="item" effect="dark" content="删除" placement="top">
                  <el-button class="el-icon-delete" size="mini" type="text" @click.stop="del(scope.row)" />
                </el-tooltip>
              </template>
            </el-table-column>
          </el-table>
          <pagination v-show="deptTotal > 0" :total="deptTotal" :page.sync="deptPageNum" :limit.sync="deptPageSize" :page-size="deptPageSize" @pagation="deptPagationChange" />
        </div>
      </div>
    </Container>
  </ContainerGroup>
</template>
<script>
import pagination from '../../components/pagination/index'
import {
  save,
  deleteSet,
  getAccessPageInfoVersion,
  getDept
} from '../../utils/apis/preparedness'
import {
  getListPage
} from '../../utils/apis/registrationApi'
export default {
  name: 'RoleManage', // 角色管理
  components: {
    pagination
  },
  data() {
    return {
      userId: '',
      pageNum: 1,
      pageSize: 20,
      total: 0,
      tableData: [],
      tableLoading: false,
      deptCode: '',
      deptCodeoptions: [],
      deptPageSize: 1,
      deptPageNum: 20,
      deptTotal: 0,
      deptData: [],
      deptLoading: false,
      row: {}
    }
  },
  created() {
    this.getData()
  },
  methods: {
    getData() { // 获取用户列表
      const parmsd = {
        deptCode: '', // 部门编码
        dutyName: '', // 任职编码
        enable: '', // 状态 0 开启 1 关闭
        realName: '', // 真实姓名
        roleCode: '', // 角色编码
        userName: '', // 用户名
        pageNum: this.pageNum,
        pageSize: this.pageSize
      }
      getListPage(parmsd).then((res) => {
        if (res.status === 200) {
          if (res.data.data.length !== 0) {
            this.tableData = res.data.data.list
            this.total = res.data.data.total
          }
        }
      })
    },
    pagationChange(payload) { // 用户分页
      this.pageNum = payload.page
      this.pageSize = payload.pageSize
      this.getData()
    },
    deptPagationChange(payload) { // 科室权限分页
      this.deptPageNum = payload.page
      this.deptPageSize = payload.pageSize
      this.getData()
    },
    // 选中用户
    viewRow(row) {
      this.userId = row.userId
      this.row = row
      this._getroleList(row)
      this.getNode()
    },
    getNode() {
      this.deptData = []
      this.deptTotal = 0
      const parmsd = {
        pageNum: this.deptPageSize,
        pageSize: this.deptPageNum,
        userCode: this.userId
      }
      getAccessPageInfoVersion(parmsd).then((res) => {
        if (res.status === 200) {
          if (res.data.data.length !== 0) {
            this.deptData = res.data.data.list
            this.deptTotal = res.data.data.total
          }
        }
      })
    },
    // 删除
    del(row) {
      const parmsd = {
        id: row.id
      }
      deleteSet(parmsd).then((res) => {
        if (res.data.code === 200) {
          this.$message.success(res.data.data)
          this.getNode()
        } else {
          this.$message.error(res.data.message)
        }
      })
    },
    // 添加
    add() {
      const arr = this.deptCode.split('-')
      const parmsd = {
        deptCode: arr[0],
        deptName: arr[1],
        employeeId: this.row.employeeId,
        userID: this.row.userId,
        userName: this.row.realname
      }
      save(parmsd).then((res) => {
        if (res.data.code === 200) {
          this.$message.success(res.data.data)
          this.getNode()
        } else {
          this.$message.error(res.data.message)
        }
      })
    },
    // 获取角色，科室列表
    _getroleList(row) {
      this.deptCodeoptions = []
      getDept({}).then((res) => {
        if (res.status === 200) {
          res.data.data.forEach(item => {

            const obj = {
              label: item.deptName,
              value: item.deptCode + '-' + item.deptName
            }
            this.deptCodeoptions.push(obj)
          })
        }
      })
    }
  }
}
</script>
<style lang="less" scoped>
  /deep/ .el-table__body tr {
    cursor: pointer;
  }

  #roleManage {
    height: 100%;
    box-sizing: border-box;

    .manage-box {
      float: left;
      height: 100%;
      width: 49%;
      margin-left: 2%;
      background-color: #fff;
      padding: 17px 20px;
      box-sizing: border-box;
    }

    .manage-box:first-child {
      margin-left: 0;
    }

    .manage-box::after {
      display: block;
      clear: both;
      content: "";
    }

    .title {
      height: 50px;
      line-height: 50px;
      box-sizing: border-box;
      border: 1px rgba(232, 234, 237, 1) solid;
      text-align: center;
      font-size: 16px;
      color: rgba(51, 51, 51, 1);
      position: relative;
      border-bottom: none;
    }

    .manage-box /deep/ .el-table__header th {
      background-color: #fff;
    }

    .icon {
      cursor: pointer;
      color: #217DFA
    }

    .p-input-title {
      display: inline-block;
      width: 100px;
      text-align: right;
    }

    .p-input {
      min-width: 180px;
      display: inline-block;
      vertical-align: middle;
    }

    .p-input-item {
      margin-bottom: 20px;
    }

    .right-btn {
      font-size: 16px;
      margin-left: 15px;
      font-weight: bold;
    }

    .p-textarea {
      display: inline-block;
      vertical-align: top;
      height: 100px;
    }

    .p-modal-table td {
      height: 50px;
    }

    .rowactive {
      background-color: #fffcfcfc;
    }

    .validate-active {
      border: 1px solid #e32020;
      display: inline-block;
    }

    .tab-head {
      padding-left: 30px;
      overflow: hidden;
      border: 1px solid rgba(232, 234, 237, 1);
      border-bottom: none;
      list-style: none;

      li {
        height: 50px;
        line-height: 50px;
        float: left;
        min-width: 80px;
        text-align: center;
        color: #333;
        cursor: pointer;
      }

      .active {
        color: #217DFA;
        border-bottom: 2px solid #217DFA;
      }
    }

    .content {
      height: 100%;
      // overflow: hidden;
    }

    .detail {
      border: 1px solid rgba(232, 234, 237, 1);
      height: 86%;
      position: relative;
      overflow: auto;
    }

    .searchBox {
      overflow: hidden;
      border-bottom: 1px solid #e8eaed;

      .p-input {
        display: block;
        float: right;
        margin: 10px;
        height: 28px;
        padding-right: 6px;
      }
    }

    .search-input {
      border: none;
      outline: none;
      height: 26px;
    }

    .list {
      height: calc(100% - 114px);
    }

    .detail /deep/ .el-tree-node__content {
      border-bottom: 1px solid #e8eaed;
      height: 40px;
      position: relative;
    }

    .detail /deep/ .el-icon-caret-right:before {
      content: "\e6e0";
    }
  }

  .btn-right {
    width: 140px;
    margin: 50px auto 0;
  }
</style>
<style lang="less">
  .el-dialog__header {
    background: #1D93A8;

    .el-dialog__title {
      color: #fff;
    }

    .el-dialog__close {
      color: #fff;
    }
  }
  .form-item-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 7px;
    box-sizing: border-box;
    .form-item {
      display: flex;
      align-items: center;
      margin: 3px;
      margin-right: 15px;
      .form-item-label {
        color: #909399;
        text-align: right;
        font-size: 16px;
        white-space: nowrap;
      }
    }
  }
</style>
